프론트엔드 스쿨 멋쟁이사자처럼 프론트엔드 스쿨 2기 17_Day 1. 이미지 포맷 포맷 컬러 표현 용량 애니메이션 투명 그림자 특징 GIF 256색 작음 압축률 안 좋음 JPG/JPEG 24비트 컬러 작음 압축률 좋음 PNG 32비트 트루컬러 반투명 처리 가능 SVG 좋음 모양 복잡에 비례 벡터 그래픽 형식 WebP 매우 좋음 매우 작음 압축률 매우 좋음 AVIF 매우 좋음 작음 지원 브라우저 적음 최신 확장자를 사용 할 때는 위에 소스코드 처럼 기본적으... 멋쟁이사자처럼프론트엔드 스쿨CSSCSS 멋쟁이사자처럼 프론트엔드 스쿨 2기 16_Day 1. 커스텀 input, select box 1. 커스텀 input, select box 1) input box custom 웹접근성을 고려하여 input 태그를 IR 기법으로 숨기고 label 태그를 스타일링 하는 방법이 있습니다. 단순하게 이미지를 삽입하는 방법보다 더 나은 코드라고 볼 수 있습니다. 2) select box custom select box도 위에 input box와 마찬... 멋쟁이사자처럼프론트엔드 스쿨CSSCSS HTML/CSS 기본 32일차 flex box는 1차원 공간에서의 직선 정렬 부모와 자식관계에서만 flex 적용가능 flex container : 아이템들을 감싸는 부모영역 flex item : 내부에 정렬을 위해 담아놓은 아이템들 내부 - 자식의 레이아웃 방식 설정, flex, grid wrap : 여러 행에 걸쳐서 배치, 시작점은 flex-direction에 의해 결정, 자기의 원래 크기를 잃지 않기 위해 wrappi... 프론트엔드 스쿨HTML/CSS 기본HTML/CSS 기본 멋쟁이사자처럼 프론트엔드 스쿨 2기 15_Day 1. CSS 설계 기법 1. CSS 설계 기법 1) OOCSS (Object Oriented CSS) 🕵️♀️ OOCSS란? UI에 있는 것들을 모두 객체로 생각하고 여러가지 모듈로 만들어 조립하는 기법입니다. 같은 형태의 UI 에 스킨만 다르다면 구조와 스킨을 분리하여 조합 합니다. 구조에 해당하는 btn 클래스에는 width, height, padding, margin 등 레이아웃에 영... 멋쟁이사자처럼프론트엔드 스쿨CSSCSS 멋쟁이사자처럼 프론트엔드 스쿨 2기 13_Day 1. flex 2. grid 1. flex flex-grow는 flex 아이템의 여백 비율을 정할 수 있는 속성입니다. flex-shrink 는 flex 아이템의 줄어드는 비율을 정할 수 있는 속성입니다. flex-basis 는 flex 아이템의 크기를 정합니다. 위에 2행에 있는 사진처럼 중심축 기준으로 grow 비율을 뺀 너비가 basis 사이즈입니다. 맨 오른쪽에 있는 사진처럼 flex... 멋쟁이사자처럼프론트엔드 스쿨CSSCSS HTML/CSS 기본 31일차 다수의 스타일을 자동으로 재생될 수 있도록 만듬 key frame이라는 걸로 애니매이션 세트를 만들어놓고 갖다씀 user의 특정 액션에 의해서 스타일 변경됨 액션하지 않으면 스타일 변경X animation은 user의 액션 없어도 계속 움직임 A B C D 로 움직이는 하나의 세트를 만들수 있음 2개일 때는 from, to로 작성 2개이상은 %로 작성 transition-porperty에 대... 프론트엔드 스쿨HTML/CSS 기본HTML/CSS 기본 자료구조/알고리즘 (JavaScript ver.) 14일차 .apply에서는 두 번째 인자로 배열을 받고, 그 배열을 각각의 인자로 배정해서 계산을 가능하게 해줌 (Math.000 메소드에서는 this 역할이 없기 때문에 첫번째 인자에 들어가는 값은 중요하지 않음) 0~1 사이의 랜덤값을 출력하기 때문에 정수로 뽑고 싶다면 10을 곱하고 parseInt() 쓰기 if문 삼항연산자 true false가 나오는 비교 ? 참일때 : 거짓일때 for문 x를... 자료구조/알고리즘 (JavaScript ver.)프론트엔드 스쿨자료구조/알고리즘 (JavaScript ver.) 자료구조/알고리즘 (JavaScript ver.) 15일차 month는 1월에 1이 아니라 1월(0) ~ 12월(11) 시간 뒤에 z가 붙는 거는 UCT 기준시간이라는 것 (영국), 우리나라랑 9시간 차이남 new Date.UTC(2022,2,20) UTC 메서드를 통해 UTC 보정 할 수 있음 .getDay() 요일 일(0) ~ 토(6) .getTime() 현재시간을 밀리세컨드로 바꿔줌 new Date(date.getTime()) 밀리세컨드를 다시... 자료구조/알고리즘 (JavaScript ver.)프론트엔드 스쿨자료구조/알고리즘 (JavaScript ver.) 자료구조/알고리즘 (JavaScript ver.) 13일차 제일 먼저 5의 배수가 아닌 경우 거르기 5의 배수인데, 총 금액을 넘어서는 경우 거르기 (1번 2번 순서 바꿔도 상관없으나 이게 더 깔끔함) 그외는 다 5의 배수이면서 총 금액을 넘지않는 경우만 남기 때문에 true x좌표 4개중 2개 2개씩 같음 why? 직사각형이기 때문에 평행해야해서 3개만 밝혀졌으니 1개만 다른 값을 찾으면 그게 4번째 좌표... 자료구조/알고리즘 (JavaScript ver.)프론트엔드 스쿨자료구조/알고리즘 (JavaScript ver.) 자료구조/알고리즘 (JavaScript ver.) 11일차 object 보다 다양한 자료형을 key로 제공 데이터에 접근하기 위해 obj.key 또는 obj[key] 같은 구문을 사용할 수 없음 객체의 값을 가져오기 위해서는 map.get(key) 구문 이용 맵.keys() key retrun 맵.values() value retrun iterable 하여 for of 구문 사용가능 어떤 메소드도 호출하지 않고 객체 그대로 넘기게 되면 [key,va... 프론트엔드 스쿨자료구조/알고리즘 (JavaScript ver.)자료구조/알고리즘 (JavaScript ver.) HTML/CSS 기본 19일차 html5를 입력하거나 !입력하고 tab 하면 html 문서에 기본 틀 볼 수 있음 html도 하나의 데이터 이기 때문에 html문서를 설명하는 데이터가 메타데이타 명사를 나열하지 말고 웹페이지를 설명할 수 있는 짧은 문장으로 나타내기 들어갈 데이터가 여러개라면 meta태그를 여러개 사용해서 문서의 정보를 나열하는 형태로 사용 name, content 속성 charset 속성 모든 언어를 지... 프론트엔드 스쿨HTML/CSS 기본HTML/CSS 기본
멋쟁이사자처럼 프론트엔드 스쿨 2기 17_Day 1. 이미지 포맷 포맷 컬러 표현 용량 애니메이션 투명 그림자 특징 GIF 256색 작음 압축률 안 좋음 JPG/JPEG 24비트 컬러 작음 압축률 좋음 PNG 32비트 트루컬러 반투명 처리 가능 SVG 좋음 모양 복잡에 비례 벡터 그래픽 형식 WebP 매우 좋음 매우 작음 압축률 매우 좋음 AVIF 매우 좋음 작음 지원 브라우저 적음 최신 확장자를 사용 할 때는 위에 소스코드 처럼 기본적으... 멋쟁이사자처럼프론트엔드 스쿨CSSCSS 멋쟁이사자처럼 프론트엔드 스쿨 2기 16_Day 1. 커스텀 input, select box 1. 커스텀 input, select box 1) input box custom 웹접근성을 고려하여 input 태그를 IR 기법으로 숨기고 label 태그를 스타일링 하는 방법이 있습니다. 단순하게 이미지를 삽입하는 방법보다 더 나은 코드라고 볼 수 있습니다. 2) select box custom select box도 위에 input box와 마찬... 멋쟁이사자처럼프론트엔드 스쿨CSSCSS HTML/CSS 기본 32일차 flex box는 1차원 공간에서의 직선 정렬 부모와 자식관계에서만 flex 적용가능 flex container : 아이템들을 감싸는 부모영역 flex item : 내부에 정렬을 위해 담아놓은 아이템들 내부 - 자식의 레이아웃 방식 설정, flex, grid wrap : 여러 행에 걸쳐서 배치, 시작점은 flex-direction에 의해 결정, 자기의 원래 크기를 잃지 않기 위해 wrappi... 프론트엔드 스쿨HTML/CSS 기본HTML/CSS 기본 멋쟁이사자처럼 프론트엔드 스쿨 2기 15_Day 1. CSS 설계 기법 1. CSS 설계 기법 1) OOCSS (Object Oriented CSS) 🕵️♀️ OOCSS란? UI에 있는 것들을 모두 객체로 생각하고 여러가지 모듈로 만들어 조립하는 기법입니다. 같은 형태의 UI 에 스킨만 다르다면 구조와 스킨을 분리하여 조합 합니다. 구조에 해당하는 btn 클래스에는 width, height, padding, margin 등 레이아웃에 영... 멋쟁이사자처럼프론트엔드 스쿨CSSCSS 멋쟁이사자처럼 프론트엔드 스쿨 2기 13_Day 1. flex 2. grid 1. flex flex-grow는 flex 아이템의 여백 비율을 정할 수 있는 속성입니다. flex-shrink 는 flex 아이템의 줄어드는 비율을 정할 수 있는 속성입니다. flex-basis 는 flex 아이템의 크기를 정합니다. 위에 2행에 있는 사진처럼 중심축 기준으로 grow 비율을 뺀 너비가 basis 사이즈입니다. 맨 오른쪽에 있는 사진처럼 flex... 멋쟁이사자처럼프론트엔드 스쿨CSSCSS HTML/CSS 기본 31일차 다수의 스타일을 자동으로 재생될 수 있도록 만듬 key frame이라는 걸로 애니매이션 세트를 만들어놓고 갖다씀 user의 특정 액션에 의해서 스타일 변경됨 액션하지 않으면 스타일 변경X animation은 user의 액션 없어도 계속 움직임 A B C D 로 움직이는 하나의 세트를 만들수 있음 2개일 때는 from, to로 작성 2개이상은 %로 작성 transition-porperty에 대... 프론트엔드 스쿨HTML/CSS 기본HTML/CSS 기본 자료구조/알고리즘 (JavaScript ver.) 14일차 .apply에서는 두 번째 인자로 배열을 받고, 그 배열을 각각의 인자로 배정해서 계산을 가능하게 해줌 (Math.000 메소드에서는 this 역할이 없기 때문에 첫번째 인자에 들어가는 값은 중요하지 않음) 0~1 사이의 랜덤값을 출력하기 때문에 정수로 뽑고 싶다면 10을 곱하고 parseInt() 쓰기 if문 삼항연산자 true false가 나오는 비교 ? 참일때 : 거짓일때 for문 x를... 자료구조/알고리즘 (JavaScript ver.)프론트엔드 스쿨자료구조/알고리즘 (JavaScript ver.) 자료구조/알고리즘 (JavaScript ver.) 15일차 month는 1월에 1이 아니라 1월(0) ~ 12월(11) 시간 뒤에 z가 붙는 거는 UCT 기준시간이라는 것 (영국), 우리나라랑 9시간 차이남 new Date.UTC(2022,2,20) UTC 메서드를 통해 UTC 보정 할 수 있음 .getDay() 요일 일(0) ~ 토(6) .getTime() 현재시간을 밀리세컨드로 바꿔줌 new Date(date.getTime()) 밀리세컨드를 다시... 자료구조/알고리즘 (JavaScript ver.)프론트엔드 스쿨자료구조/알고리즘 (JavaScript ver.) 자료구조/알고리즘 (JavaScript ver.) 13일차 제일 먼저 5의 배수가 아닌 경우 거르기 5의 배수인데, 총 금액을 넘어서는 경우 거르기 (1번 2번 순서 바꿔도 상관없으나 이게 더 깔끔함) 그외는 다 5의 배수이면서 총 금액을 넘지않는 경우만 남기 때문에 true x좌표 4개중 2개 2개씩 같음 why? 직사각형이기 때문에 평행해야해서 3개만 밝혀졌으니 1개만 다른 값을 찾으면 그게 4번째 좌표... 자료구조/알고리즘 (JavaScript ver.)프론트엔드 스쿨자료구조/알고리즘 (JavaScript ver.) 자료구조/알고리즘 (JavaScript ver.) 11일차 object 보다 다양한 자료형을 key로 제공 데이터에 접근하기 위해 obj.key 또는 obj[key] 같은 구문을 사용할 수 없음 객체의 값을 가져오기 위해서는 map.get(key) 구문 이용 맵.keys() key retrun 맵.values() value retrun iterable 하여 for of 구문 사용가능 어떤 메소드도 호출하지 않고 객체 그대로 넘기게 되면 [key,va... 프론트엔드 스쿨자료구조/알고리즘 (JavaScript ver.)자료구조/알고리즘 (JavaScript ver.) HTML/CSS 기본 19일차 html5를 입력하거나 !입력하고 tab 하면 html 문서에 기본 틀 볼 수 있음 html도 하나의 데이터 이기 때문에 html문서를 설명하는 데이터가 메타데이타 명사를 나열하지 말고 웹페이지를 설명할 수 있는 짧은 문장으로 나타내기 들어갈 데이터가 여러개라면 meta태그를 여러개 사용해서 문서의 정보를 나열하는 형태로 사용 name, content 속성 charset 속성 모든 언어를 지... 프론트엔드 스쿨HTML/CSS 기본HTML/CSS 기본